import '../../styles/appleBasket.scss';
import AppleItem from './appleItem';
import { observer } from 'mobx-react-lite'
import { useRootStore } from "../../store/RootStore"

function Apple () {
    const { appleStore } = useRootStore()
    let { status, isPicking, buttonText, pickApple, apples, eatApple  } = appleStore

    let {
        appleNow: {quantity: notEatenQuantity, weight: notEatenWeight},
        appleEaten: {quantity: EatenQuantity, weight: EatenWeight}
    } = status;
    return (
        <div className="appleBusket">
                <div className="title">苹果篮子</div>

                <div className="stats">
                    <div className="section">
                        <div className="head">当前</div>
                        <div className="content">{notEatenQuantity}个苹果，{notEatenWeight}克
                        </div>
                    </div>
                    <div className="section">
                        <div className="head">已吃掉</div>
                        <div className="content">{EatenQuantity}个苹果，{EatenWeight}克</div>
                    </div>
                </div>

                <div className="appleList">
                    { getAppleItem(apples, eatApple) }
                </div>

                <div className="btn-div">
                    <button  className={isPicking ? 'disabled' : ''}  onClick={() => pickApple() } >{buttonText}</button>
                </div>
            </div>
      );
}

function getAppleItem(apples, eatApple) {
    let data = [];

    apples.forEach(apple => {
      if (!apple.isEaten) {
        data.push(
          <AppleItem
            eatApple={eatApple}
            apple={apple}
            key={apple.id}
          />
        );
      }
    });
    if (!data.length) return <div>its empth</div>;
    return data;
  }
export default observer(Apple)